<!DOCTYPE html>
<html>
<head>
    <title> test</title>
    <meta charset="utf-8">
    <script src="../jquery.js"></script>
    <script src="../browser.js"></script> 
    <script src="../es6-module-loader.js"></script>
    <style>
        .label {
            display: inline-block;
            width: 70px; 
            margin-bottom: 10px;
        }
        input[type=range] {
            width: 300px;
        }
    </style>
</head>
<body>
<input type="file" id="file">
<canvas id="canvas" width="512" height="512"  style="float:left;background:#ccc;">your browser doesn't support canvas</canvas>

<canvas id="myCanvas" width="512" height="512" style="float:left;background:#f6f7f8;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="box" style="float: left;">
    <span class="label">sx :</span> <input id="sx" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">sy :</span> <input id="sy" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">x :</span> <input id="x" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">y :</span> <input id="y" type="range" min="-100" max="512" step="5" value="0"><span></span>
   <br>
        <span class="label">width :</span> <input id="width" type="range" min="0" max="512" step="5" value="512"><span></span>
   <br>
        <span class="label">height :</span> <input id="height" type="range" min="0" max="512" step="5" value="512"><span></span>
   <br>
   
    <button id="drawImage">Put Image Data</button>
</div>

<script>
var $box = $("#box"),
    $inputs = $("input", $box),
    $btn = $("drawImage"),
    $sx = $("#sx"),
    $sy = $("#sy"),
    $x = $("#x"),
    $y = $("#y"),
    $width = $("#width"),
    $height = $("#height"),
    $c = $("#myCanvas"),
    ctx = $c.get(0).getContext("2d"),
    $img = $("#tulip");
    
var $f = $("#file"),
    $c2 = $("#canvas"),
    r = new FileReader(),
    ctxLeft = $c2.get(0).getContext("2d"),
    imageData = null;
    
    updateLabel();
    
    $box.delegate("input", "input", function() {
        draw();
        updateLabel();
    });

 

    $box.delegate("button", "click", draw);

    function updateLabel() {
        $inputs.each(function(i, e) {
            $(this).next("span").text($(this).val());
        });
    }
    
    function draw() {
        ctx.clearRect(0, 0, 512, 512);
        ctx.save();
        //ctx.translate(256, 256);
    //    ctx.scale(2, 2);
    //    ctx.drawImage($img.get(0), 0, 0);
    //   
     //  ctx.drawImage($img.get(0), $sx.val(), $sy.val(), $swidth.val(), $sheight.val(), $x.val(), $y.val(), $width.val(), $height.val());   
        console.log("draw");
        ctx.putImageData(imageData, $sx.val(), $sy.val(), $x.val(), $y.val(), $width.val(), $height.val());
        
         ctx.restore();
    }

    
    System.transpiler = "babel";
    System.babelOptions = {
        stage: 0
    };  
    System.import("./hc-dicom-parser.es6").then(function(dicom) {
        r.onload = function() {
            var parser = new dicom.Parser(); 
            parser.parse(r.result); 
            imageData = parser.fillImageData(ctx.createImageData(512, 512));
            
            ctxLeft.translate(256, 256);
            ctxLeft.putImageData(imageData, 0, 0); 
        };

        $f.on("change", function() {
            var ff = $f.get(0).files[0];
            r.readAsArrayBuffer(ff);
        });
        
    });

</script>

</body>
</html>